<template>
  <div class="card">
    <div class="input_top">
      <a-input class="inputStyle" v-model="formData.search.realname" placeholder="用户姓名"></a-input>
      <a-input class="inputStyle" v-model="formData.search.phone" placeholder="用户手机"></a-input>
      <a-select class="selectStyle" placeholder="请选择跟进类型">
        <a-select-option v-for="item in FollowType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-range-picker
        v-model="formData.search.end_date_range"
        style="width: 348px"
        :show-time="{ format: 'HH:mm' }"
        format="YYYY-MM-DD HH:mm"
        :placeholder="['大计划开始时间', '大计划结束时间']"
        @change="dateChange"
      />
    </div>
    <div class="input_bottom">
      <a-select class="selectStyle" placeholder="请选择级别">
        <a-select-option v-for="item in levelTyle" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select v-model="formData.search.real_status" class="selectStyle" placeholder="请选择实名状态">
        <a-select-option
          v-for="item in [
            { id: 1, name: '已实名' },
            { id: 0, name: '未实名' }
          ]"
          :key="item.id"
          :value="item.id"
          >{{ item.name }}</a-select-option
        >
      </a-select>
      <a-select v-model="formData.search.bind_status" class="selectStyle" placeholder="请选择绑卡状态">
        <a-select-option
          v-for="item in [
            { id: 1, name: '已绑卡' },
            { id: 0, name: '未绑卡' }
          ]"
          :key="item.id"
          :value="item.id"
          >{{ item.name }}</a-select-option
        >
      </a-select>
      <a-select v-model="formData.search.trade_status" class="selectStyle" placeholder="请选择交易状态">
        <a-select-option
          v-for="item in [
            { id: 1, name: '已使用' },
            { id: 0, name: '未使用' }
          ]"
          :key="item.id"
          :value="item.id"
          >{{ item.name }}</a-select-option
        >
      </a-select>
      <a-button style="margin-right: 10px" type="primary">查询</a-button>
      <a-button @click="reset">重置</a-button>
    </div>
    <a-spin :spinning="loading">
      <a-table
        :rowKey="(record, index) => index"
        bordered
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
      >
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import { getFollowTypeAPI, getLevelAPI, getUserListAPI } from '@/api/follow.js'
export default {
  name: 'memberfollowlist',
  data() {
    return {
      loading: false,
      FollowType: [],
      levelTyle: [],
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          realname: '', // 用户姓名
          phone: '', //用户手机
          bind_status: undefined,
          end_date_range: undefined,
          start_time: '',
          end_time: '',
          real_status: undefined,
          trade_status: undefined,
          type: ''
        }
      },
      tableData: [],
      columns: [
        {
          title: '注册日期',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '用户姓名',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '用户手机',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '是否真实',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '等级',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '上级姓名',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '是否跟进',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '跟进时间',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '任务类型',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '次数',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '下次跟进时间',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '使用记录',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '本月直推人数',
          dataIndex: '',
          align: 'center'
        }
      ]
    }
  },
  created() {
    this.getFollowType()
    // this.getUserList()
  },
  methods: {
    reset() {
      this.formData = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          realname: '',
          phone: '',
          bind_status: undefined,
          end_date_range: undefined,
          start_time: '',
          end_time: '',
          real_status: undefined,
          trade_status: undefined,
          type: ''
        }
      }
    },
    dateChange(value, date) {
      this.formData.search.start_time = date[0]
      this.formData.search.end_time = date[1]
    },
    async getFollowType() {
      const { data } = await getFollowTypeAPI()
      const result = await getLevelAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      this.levelTyle = result.data
      this.FollowType = data
    },
    async getUserList() {
      const res = await getUserListAPI(this.formData)
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
  .input_top {
    margin-bottom: 10px;
  }
  .input_bottom {
    margin-bottom: 10px;
  }
  .inputStyle {
    margin-right: 10px;
    width: 200px;
  }
  .selectStyle {
    margin-right: 10px;
    width: 200px;
  }
}
</style>
